<template>
    <div class="search-List">
        <div class="headers">
            <Header></Header>
            <ul>
                <!-- <li>
                    <div>综合</div>
                </li>
                <li>
                    <div>价格</div>
                    <div class="search-filter">
                        <i class="iconfont icon-shangjiantou"></i>
                        <i class="iconfont icon-xiajiantou"></i>
                    </div>
                </li>
                <li>
                    <div>销量</div>
                    <div class="search-filter">
                       <i class="iconfont icon-shangjiantou"></i>
                        <i class="iconfont icon-xiajiantou"></i>
                    </div>
                </li> -->

                <li 
                v-for="(item, index) in searchList.data" :key="index"
                @click="changeTab(index)"
                >
                    <div :class=" searchList.currentindex == index ? 'active' : ''  ">{{item.name}}</div>
                    <div class="search-filter" v-if="index != 0">
                        <i 
                        class="iconfont icon-shangjiantou"
                        :class=" item.status == 1 ? 'active' : '' "
                        ></i>
                        <i 
                        class="iconfont icon-xiajiantou"
                        :class=" item.status == 2 ? 'active' : '' "
                        ></i>
                    </div>
                </li>
            </ul>
        </div>

        <section>
            <ul v-if="goodsList.length">

                <li v-for="(item, index) in goodsList" :key="index">
                    <img v-lazy="item.imgUrl" alt="">
                    <h3>{{item.name}}</h3>
                    <div class="price">
                        <div>
                            <span>￥</span>
                            <b>{{item.price}}</b>
                        </div>
                        <div>立即购买</div>
                    </div>
                </li>
 
            </ul>
            <h1 v-else>暂无数据...</h1>
        </section>

        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Header from '@/components/search/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
import http from '@/common/api/request.js'
export default {
    data() {
        return {
            goodsList: [],
            searchList: {
                currentindex: 0,
                data: [
                    // status: 0   大家都不亮
                    // status: 1   上箭头亮
                    // status: 2   下箭头亮
                    {name: '综合', key: 'zh'},
                    {name: '价格', status: 0, key: 'price'},
                    {name: '销量', status: 0, key: 'num'}
                ]
            }
        }
    },
    components: {
        Header,
        Tabbar
    },
    methods:{
        getData() {
            http.$axios({
            url: '/api/goods/shopList',
            params: {
                    searchName: this.$route.query.key,
                    ...this.orderBy
                }
            }).then(res=>{
                this.goodsList = res
                // console.log(res)
            })
        },
        changeTab(index) {
            this.searchList.currentindex = index
            // 点击的下标对应哪一个数据
            let item = this.searchList.data[index]
            // console.log(item)
            //取消所有的状态值==》都变成0
            this.searchList.data.forEach((v, i) => {
                console.log(v, i)
                if(i != index) {
                    v.status = 0
                }
            });
            // 当前点击的改变状态
            if(index == this.searchList.currentindex) {
                item.status = item.status == 1 ? 2 : 1;
            }
            //重新发送请求进行数据的排序   要告诉后端传递数据 升序还是降序
            this.getData()

        }
    },
    created() {
        this.getData()
    },
    watch: {
        $route() {
            this.getData()
        }
    },
    computed: {
        orderBy() {
            //知道当前是哪一个对象
            let obj = this.searchList.data[this.searchList.currentindex]
            //针对于状态，判断是asc升序，还是desc降序
            let val = obj.status == '1' ? 'asc' : 'desc';
            return {
                [obj.key]: val
            }
        }
    }
}
</script>

<style scoped>

.search-List {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.headers ul{
    display: flex;
    justify-content: space-around;
    padding: .4rem 0;
    font-size: .36rem;
}
.headers ul li {
    display: flex;
    align-items: center;
}
.headers ul li > div{
    padding: 0 .06rem;
    font-weight: 700;
    font-size: .36rem;
}
.search-filter {
    display: flex;
    flex-direction: column;
}
section {
    display: flex;
    flex: 1;
}
section ul li {
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    width: 50%;
    box-sizing: border-box;
    padding: .2rem;
}
section ul li h3 {
    width: 100%;
    font-size: .28rem;
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #222222;
}
section ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
section ul li img {
    width: 4.533333rem;
    height: 4.533333rem;
}
section ul li .price {
    display: flex;
    justify-content: space-around;
    width: 100%;
    font-size: .28rem;
    padding: .2rem 0;
}
section ul li .price div:last-child {
    color: #FFF;
    background-color: #b0352f;
    padding: 0.08rem 0.16rem;
    border-radius: 0.08rem;
}
section ul li .price div:first-child span {
    color: #b0352f;
    font-size: .24rem;
}
section ul li .price div:first-child b {
    color: #b0352f;
    font-size: .32rem;
}
.headers ul li div i {
    font-size: .24rem;
}
.active {
    color: red;
}
section ul li img[lazy=loading] {
    background-color: #F7F7F7;
}
</style>